<script setup>
import { ref,onMounted } from 'vue'
import { queryOutbound,updateOutbound } from '../../api/outboundorder'
import { ElMessage, ElMessageBox } from 'element-plus'

//分页条件查询
const query = async () =>{
  const result = await queryOutbound(page.value,pageSize.value,outBoundFrom.value.invoiceCode,outBoundFrom.value.customerName,outBoundFrom.value.skuTitle)
  outBoundList.value = result.data.rows
  total.value = result.data.total
}
//清空表单数据
const clear = () => {
  outBoundFrom.value = { invoiceCode: '', customerName: '', skuTitle: ''}
  query()
}

//定义表格数据
const outBoundList = ref([])
//定义表单数据
const outBoundFrom = ref({ invoiceCode: '', customerName: '', skuTitle: ''})
//定义分页的变量
const page = ref(1)
const pageSize = ref(10)
const total = ref(0)
//定义分页的点击事件
const handleSizeChange = (val) => {
  page.value = 1
  query()
}
const handleCurrentChange = (val) => {
  query()
}
//挂载
onMounted(() => { 
  query()
})

//确认出库的点击事件
const confirm = async (row)=>{ 
  //弹出一个确认框;
  ElMessageBox.confirm('确认出库完成？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    const result = await updateOutbound(row);
    if(result.code){
      ElMessage.success('操作成功')
      query()
    }else{
      ElMessage.error('操作失败！请重新操作')
    }
  }).catch(() => {
    // 用户点击取消后的操作
    ElMessage.info('已取消操作')
  })
}

</script>
<template>
<div><h3>出库</h3></div>
<div>
  <el-form :inline="true" :model="outBoundFrom" class="demo-form-inline">
    <el-form-item>
      <el-input v-model="outBoundFrom.invoiceCode" placeholder="发货单号" style="width: 200px;"/>
    </el-form-item>
    <el-form-item>
      <el-input v-model="outBoundFrom.customerName" placeholder="客户名称" style="width: 200px;"/>
    </el-form-item>
    <el-form-item>
      <el-input v-model="outBoundFrom.skuTitle" placeholder="商品名称" style="width: 200px;"/>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="query" plain>查询</el-button>
      <el-button type="default" @click="clear" plain>清空</el-button>
    </el-form-item>
  </el-form>
</div>

<!-- table表格 -->
<div>
  <el-table :data="outBoundList" border style="width: 100%" >
    <el-table-column fixed type="index" label="序号" align="center"  width="80"/>
    <el-table-column prop="invoiceCode" label="发货单号" align="center"  width="200"></el-table-column>
    <el-table-column prop="status" label="状态" align="center" width="120">
      <template #default="scope">
        <el-tag v-if="scope.row.status == 7" type="info">待发货</el-tag>
        <el-tag v-else="scope.row.status == 8" type="success">已发货</el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="skuCode" label="商品编码" align="center"  width="200"></el-table-column>
    <el-table-column prop="skuTitle" label="商品名称" align="center"  width="200"></el-table-column>
    <el-table-column prop="weightsCode" label="称重单号" align="center"  width="200"></el-table-column>
    <el-table-column prop="count" label="订单数量" align="center" width="150"/>
    <el-table-column prop="weightVal" label="称重重量" align="center" width="150"/>
    <el-table-column prop="weightsUnit" label="称重单位" align="center" width="150">
      <template #default="scope">
        <span v-if="scope.row.weightsUnit == 1">g</span>
        <span v-else-if="scope.row.weightsUnit == 2">kg</span>
        <span v-else-if="scope.row.weightsUnit == 3">t</span>
        <span v-else>{{ scope.row.weightsUnit }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="customerName" label="客户名称" align="center" width="150"/>
    <el-table-column prop="confirmPickEmp" label="拣货复核员" align="center" width="150"/>
    <el-table-column prop="createTime" label="创建时间" align="center" width="200"/>
    <el-table-column prop="createBy" label="创建人" align="center" width="150"/>
    <el-table-column fixed="right" label="操作" align="center" width="120">
      <template #default="scope">
        <el-button type="primary" size="small" @click="confirm(scope.row)" plain><el-icon><Select /></el-icon></el-button>
        <el-button type="success" size="small" @click="transport(scope.row.id)" plain><el-icon><Van /></el-icon></el-button>
      </template>
    </el-table-column>
  </el-table>
</div>


<!-- 分页 -->
<div>
  <el-pagination
  v-model:current-page="page"
  v-model:page-size="pageSize"
  :page-sizes="[5, 10, 15, 20]"
  layout="total, sizes, prev, pager, next, jumper"
  :total="total"
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"/>
</div>
</template>
<style scoped>
</style>